<template>
  <div class="contaienr">
      <van-form>
        <van-field
          v-model="editForm.consigneeName"
          name="收货人"
          label="收货人"
          :rules="[{ required: false}]"
          placeholder="收货人"
        />
        <van-field
          v-model="editForm.consigneePhone"
          name="收货人"
          label="收货人账号"
          :rules="[{ required: false}]"
          placeholder="收货人账号"
        />
        <van-field
          readonly
          clickable
          name="area"
          :rules="[{ required: false}]"
          :value="editForm.address"
          label="地区选择"
          placeholder="点击选择省市区"
          @click="showArea = true"
        />
        <van-popup v-model="showArea" position="bottom">
          <van-area
            :area-list="areaList"
            @confirm="onConfirm"
            @cancel="showArea = false"
          />
        </van-popup>
        <div style="margin: 16px;">
          <van-button type="warning" @click="saveAddress">保存</van-button>
        </div>
      </van-form>
  </div>
</template>

<script>
import areaList from '@/common/area'
import { mapState } from 'vuex'

export default {
  data() {
    return {
      addressInfo: {},
      areaList: areaList,
      showArea: false,
      editForm: {
        id: this.$route.query.id,
        userId: '',
        address: '',
        consigneeName: '',
        consigneePhone: ''
      }
    }
  },
  created() {
    if (this.$route.query.id) {
      this.getAddress()
    }
  },
  computed: {
    ...mapState(['user'])
  },
  methods: {
    saveAddress() {
      if (!this.editForm.consigneeName) {
        return
      }
      if (!this.editForm.consigneePhone) {
        return
      }
      if (!this.editForm.address) {
        return
      }
      if (this.$route.query.id) {
        delete this.editForm.userId
        this.$api.cart.discAddress(this.editForm).then(res => {
          if (res.code === 200) {
            this.$toast.success(res.msg)
            this.$router.push({
              path: '/address-list'
            })
          }
        })
      } else {
        delete this.editForm.id
        this.editForm.userId = this.user.id
        this.$api.cart.addAddress(this.editForm).then(res => {
          if (res.code === 200) {
            this.$toast.success(res.msg)
            this.$router.push({
              path: '/address-list'
            })
          }
        })
      }
    },
    onConfirm(values) {
      this.editForm.address = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join('')
      this.showArea = false
    },
    /**
     * 获取地址信息
     */
    getAddress() {
      const query = {
        userId: this.user.id
      }
      this.$api.cart.getAddressList(query).then(res => {
        if (res.code === 200) {
          this.addressInfo = res.data.filter(item => {
            return Number(item.id) === Number(this.$route.query.id)
          }).map(item => {
            return {
              id: item.id,
              name: item.consigneeName,
              tel: item.consigneePhone,
              addressDetail: item.address
            }
          })[0]
          this.editForm.address = this.addressInfo.addressDetail
          this.editForm.consigneeName = this.addressInfo.name
          this.editForm.consigneePhone = this.addressInfo.tel
        }
      })
    },
    updateAddress(form) {
    },
    deleteAddress(params) {
    },
    onDelete() {
    }
  }
}
</script>

<style lang="less" scoped>
</style>

